<!--
 * @Author: dengyl
 * @Date: 2022-01-25 15:53:12
 * @LastEditTime: 2022-05-17 10:55:02
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 督办组件
 * @FilePath: \code\cwp-front\pc-collaboration\src\components\atom\supervise\index.vue
-->
<script>
  /*global getCtpTop*/
  import { useBaseInfoStore, getAccessFileSecretLevel } from '@/store/modules/base-info.js';
  import { mapState } from 'pinia';
  import moment from 'moment';

  const TITLE_MAX_LENGTH = 85;

  const Container = {
    props: {
      title: {
        type: String
      }
    },
    render() {
      return (
        <div class="supervise">
          <div>{this.title}</div>
          {this.$slots.default}
        </div>
      );
    }
  };

  export default {
    name: 'SuperviseCom',
    props: {
      supervise: {
        type: Object
      }
      // :auto-size="{ minRows: 3, maxRows: 5 }"
    },
    data() {
      return {
        awakeDateValue: ''
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['unCancelledVisor']) // 不能取消的督办人
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        if (this.supervise.superviseAwakeDate) {
          this.awakeDateValue = moment(+this.supervise.superviseAwakeDate);
        } else {
          this.awakeDateValue = '';
        }
      },
      getValues() {
        // 原业务逻辑
        var panlesValue = '';
        if (this.supervise.supervisorIds) {
          var ids = this.supervise.supervisorIds.split(',');
          ids[0] != '' && (panlesValue = ids.reduce((p, c) => `${p},Member|${c}`, '').slice(1));
        }

        return panlesValue;
      },
      /**
       * @description 督办人员
       */
      superviseNamesClick() {
        if (this.supervise.readOnly) return;

        var paramsValue = this.getValues();
        var _this = this;
        $.selectPeople({
          type: 'selectPeople',
          panels: 'Department,Team,BusinessDepartment,OrgMetadataTag',
          selectType: 'Member,OrgMetadataTag',
          orgMetadataTagTypes: 'Member',
          minSize: 0,
          text: $.i18n('common.default.selectPeople.value'),
          returnValueNeedType: false,
          showFlowTypeRadio: false,
          onlyLoginAccount: false,
          hiddenMetadataOfDepartment: true,
          accessFileSecretLevel: getAccessFileSecretLevel(),
          maxSize: 50,
          params: {
            value: paramsValue
          },
          targetWindow: getCtpTop(),
          callback: function callback(res) {
            // 拼接字符串
            var _val = '';
            _val = res.obj
              .reduce((value, item) => {
                return item.type === 'OrgMetadataTag'
                  ? `${value},OrgMetadataTag|${item.id}`
                  : `${value},${item.id}`;
              }, '')
              .slice(1);

            // 当存在不能删除的督办人员时候 进行检查
            var unCancel = _this.unCancelledVisor;
            var isBreak = false;
            if (unCancel) {
              var unCancelArray = unCancel.split(',');
              var selectArray = res.value.split(',');
              unCancelArray.forEach((un) => {
                if (selectArray.indexOf(un) === -1) {
                  isBreak = true;
                  $.alert($.i18n('collaboration.newCollaboration.templatePersonnelNoDel'));
                  return;
                }
              });
            }
            if (isBreak) return;

            // 更新当前数据
            _this.$emit('update', {
              supervisorIds: _val,
              supervisorNames: res.text
            });
          }
        });

        // 取消输入框的焦点
        this.$refs.supervise && this.$refs.supervise.blur();
      },
      /**
       * @description 督办期限
       */
      checkAwakeDate(val) {
        if (!val) {
          this.$emit('update', {
            superviseAwakeDate: null
          });
          return;
        }
        var _this = this;

        // isOpen: 保证当前只有一个弹出窗
        if (!this.isOpen && val.valueOf() < Date.now()) {
          this.isOpen = true;
          // 督办时间比当前时间早，是否继续？
          this.$confirm({
            title: this.$i18n('common.system.hint.label'),
            zIndex: 9999,
            // h 参数需保留，渲染需要该参数
            // eslint-disable-next-line no-unused-vars
            content: (h) => <div>{$.i18n('collaboration.newColl.thisTimeGrSupTime2')}</div>,
            onOk() {
              _this.isOpen = false;
              _this.$emit('update', {
                superviseAwakeDate: val.valueOf()
              });
            },
            onCancel() {
              _this.isOpen = false;
              _this.$emit('update', {
                superviseAwakeDate: null
              });
              _this.awakeDateValue = '';
            }
          });
        } else {
          this.$emit('update', {
            superviseAwakeDate: val.valueOf()
          });
        }
      }
    },
    render() {
      return (
        <div>
          <Container title={$.i18n('collaboration.newcoll.dbry')}>
            <div class="width-auto">
              <a-input
                disabled={this.supervise.readOnly}
                ref="supervise"
                v-model={this.supervise.supervisorNames}
                onClick={this.superviseNamesClick}>
                <a-tooltip
                  class={['choose-person', { 'no-event': this.supervise.readOnly }]}
                  slot="suffix"
                  onClick={this.superviseNamesClick}>
                  <i class="syIcon sy-choose-persons1" />
                </a-tooltip>
              </a-input>
            </div>
          </Container>
          <Container title={$.i18n('template.myprocess.columns.supervise.period.js') + '：'}>
            <a-date-picker
              disabled={this.supervise.readOnly}
              class="width-auto"
              v-model={this.awakeDateValue}
              show-time
              placeholder=""
              format="YYYY-MM-DD HH:mm"
              onChange={this.checkAwakeDate}
            />
          </Container>
          <Container title={$.i18n('collaboration.newcoll.dbzt')}>
            <div class="width-auto">
              <a-input
                disabled={this.supervise.readOnly}
                maxLength={TITLE_MAX_LENGTH}
                allow-clear
                v-model={this.supervise.superviseTitle}
                placeholder=""
              />
            </div>
          </Container>
        </div>
      );
    }
  };
</script>
<style lang="scss" scoped inline>
  .supervise {
    display: flex;
    margin-bottom: 12px;
    align-items: center;

    .width-auto {
      flex-grow: 1;
    }
  }

  .choose-person:hover {
    cursor: pointer;
  }

  .no-event:hover {
    pointer-events: none;
  }
</style>
